<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>客户详情－查看</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="../assets/css/amazeui.min.css?v=2.9">
    <link rel="stylesheet" href="../assets/css/style.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/index.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/extend.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/icons.css?v=2.3">
    <link rel="stylesheet" href="../assets/js/layui/css/layui.css">
    <script type='text/javascript' src='../assets/js/layui/layui.js'></script>
</head>
<body class="bg-gray">
<div id="useredit" v-cloak>

<section class="" id="amz-main" data-tag="css-nav">
    <div class="tixian-top-me  font-color-white prelative">
        <div class="am-padding-top-lg">
            <div class=" am-center width-60px me-top"><img v-bind:src="userinfo.head_icon" class="am-circle am-text-center"></div>
            <div class="  am-text-center am-margin-top-xs">
                <div class="  font-18 font-color-white padding-top-2">{{userinfo.name}}成为你的客户第{{tramlate(userinfo.create_time)}}天</div>
            </div>
        </div>
    </div>
    <div class="bg-white am-padding-left-sm am-padding-right-sm am-margin-top-sm font-16">


<!--        <div class="box border-bottom am-padding-top-sm am-padding-bottom-sm">
            <div class="box-1 ">标签</div>
            <div class="">
                <div class="box" v-for="label in userinfo.label">
                    <div class="goodnum am-margin-right-sm">{{label}}</div>
                </div>
            </div>
        </div>-->
        <div  class="box border-bottom  am-padding-top-sm am-padding-bottom-sm">
            <div class="box-1 ">来源</div>
            <div class="font-color-1">
                <input  readonly="readonly" class="am-input am-text-right"  v-bind:value="userinfo.froms" v-model="userinfo.froms" >
            </div>
        </div>
        <div  class="box border-bottom  am-padding-top-sm am-padding-bottom-sm">
            <div class="box-1 ">姓名</div>
            <div class="font-color-1">
                <input  class="am-input am-text-right" placeholder="请输入" v-bind:value="userinfo.name" v-model="userinfo.name">
            </div>
        </div>
        <div   class="box  border-bottom  am-padding-top-sm am-padding-bottom-sm prelative">
            <div class="box-1 ">微信绑定号码</div>
            <div class=" font-color-1">
                <input readonly="readonly" class="am-input am-text-right" placeholder="未获取号码" v-bind:value="userinfo.wx_phone" v-model="userinfo.wx_phone">
            </div>
        </div>
        <div   class="box  border-bottom  am-padding-top-sm am-padding-bottom-sm prelative">
            <div class="box-1 ">手机号</div>
            <div class=" font-color-1">
                <input id="shouji"  class="am-input am-text-right" placeholder="请输入" v-bind:value="userinfo.phone" v-model="userinfo.phone">
            </div>
        </div>

        <div   class="box  border-bottom am-padding-top-sm am-padding-bottom-sm prelative">
            <div class="box-1 ">邮箱</div>
            <div class=" font-color-1">
                <input  class="am-input am-text-right" placeholder="请输入" v-bind:value="userinfo.mail" v-model="userinfo.mail">
            </div>
        </div>
        <div  class="box  border-bottom am-padding-top-sm am-padding-bottom-sm prelative">
            <div class="box-1 ">公司</div>
            <div class=" font-color-1">
                <input  class="am-input am-text-right" placeholder="请输入" v-bind:value="userinfo.company" v-model="userinfo.company">
            </div>
        </div>
        <div   class="box border-bottom  am-padding-top-sm am-padding-bottom-sm prelative">
            <div class="box-1 ">职位</div>
            <div class=" font-color-1">
                <input  class="am-input am-text-right" placeholder="请输入" v-bind:value="userinfo.position" v-model="userinfo.position">
            </div>
        </div>
        <div   class="box    am-padding-top-sm am-padding-bottom-sm prelative">
            <div class="box-1 ">生日</div>
            <div class=" font-color-1">
                <input id="shengri"  class="am-input am-text-right" placeholder="请输入" v-bind:value="userinfo.birthday" v-model="userinfo.birthday">
            </div>
        </div>
    </div>
    <div class="bg-white am-padding-left-sm am-padding-right-sm am-margin-top-sm font-16">
        <div class="box border-bottom am-padding-top-sm am-padding-bottom-sm">
            <div class="box-1 ">备注</div>
            <div class=" font-color-1">
                <input  class="am-input am-text-right" placeholder="请输入" v-bind:value="userinfo.remark" v-model="userinfo.remark">
            </div>
        </div>
    </div>
</section>
<footer data-am-widget="navbar" class="am-navbar am-cf border-0 am-navbar-default am-padding-right-sm am-padding-left-sm">
    <div class="btn-88" v-on:click="save()">保存</div>
</footer>
</div>

<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/amazeui.min.js"></script>
<script src="../assets/js/amazeui.min.js"></script>
<script src="../assets/common.js"></script>
<script src="../assets/js/vue2.2.2.min.js"></script>

<script>
    $(".tab-container .tab-items").on("click",function () {
        $(".tab-container .tab-items").removeClass("cur");
        $(this).addClass("cur");
    })
</script>
<script>
    $(".tab-container .tab-items").on("click", function () {
        $(".tab-container .tab-items").removeClass("cur");
        $(this).addClass("cur");
    })

    var userid = getQueryString("userid");
    var sessionid = getQueryString("sessionid");
    var mask;
    layui.use('layer', function(){
        var layer = layui.layer;
    });
    $(function(){
        setTimeout(function(){
            mask = layer.msg('正在加载', {icon: 16});
            useredit();
        },200)

    })
    function useredit() {
        $.ajax({
            type: 'get',
            url: baseUrl + 'v3.0/user/detail?user_id=' + userid,
            contentType: 'application/json',
            headers: {'session_id': sessionid},
            success: function (result) {
                layer.close(mask);
                result.birthday=timestampToTime2(result.birthday);
                result.froms=froms(result.froms)
                //注册vue
                new Vue({
                    el: "#useredit",
                    data: {
                        userinfo: result
                    },
                    methods:{
                        save:function(){
                            if (!checkMobile(this.userinfo.phone)&&(this.userinfo.phone!=null)&&(this.userinfo.phone!="")) {
                                mask = layer.msg('手机号码不正确', {icon: 2});
                                $("#shouji").focus();
                                setTimeout(function () {
                                    layer.close(mask);
                                }, 1500)
                            } else if(!checkYear(this.userinfo.birthday)){
                                mask = layer.msg('日期格式不正确', {icon: 2});
                                $("#shengri").focus();
                                setTimeout(function () {
                                    layer.close(mask);
                                }, 1500)
                            }else{
                                mask = layer.msg('正在保存', {icon: 16});
                                console.log(this.userinfo);
                                this.userinfo.froms=tos(this.userinfo.froms)
                                var that=this
                                $.ajax({
                                    type: 'post',
                                    url: baseUrl + 'v3.0/user/edit',
                                    contentType: 'application/json',
                                    data: JSON.stringify(this.userinfo),
                                    success:function(result){
                                        layer.close(mask);
                                        //修改成功后返回并刷新 --刷新貌似有问题
                                        layer.close(mask);
                                        //修改成功后返回并刷新 --刷新貌似有问题
                                        that.userinfo.froms=froms(that.userinfo.froms)
                                        mask = layer.msg('保存成功', {icon: 1});
                                        setTimeout(function () {
                                            layer.close(mask);
                                        }, 1000)
                                    }
                                })
                            }

                        },
                        tramlate:function(time){
                            return Math.ceil((Date.parse(new Date())-time)/60/60/24/1000)
                        }

                    }
                })

            }
        });
    }
    function froms(from){
        if(from==1){
            return '扫码';
        }else if(from==2){
            return '分享';
        }else if(from==3){
            return '工作交接';
        } else{
            return from;
        }
    }

    function checkMobile(str) {
        var
            re = /^1\d{10}$/
        if (re.test(str)) {
            return true
        } else {
            return false
        }
    }
    function tos(from){
        if(from=='扫码'){
            return 1;
        }else if(from=='分享'){
            return 2;
        }else if(from=='工作交接'){
            return 3;
        } else{
            return 0;
        }
    }
    function timestampToTime2 (timestamp){
        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        Y = date.getFullYear() + '-';
        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        D = (date.getDate()+1 < 10 ? '0'+(date.getDate()+1) : date.getDate());
        return Y+M+D;
    }

    function checkYear(str) {
        var filter = /^\d{4}\-\d{2}\-\d{2}$/;
        if (filter.test(str)) return true;
        else {
            return false;
        }
    }
</script>
</body>
</html>